<template>
  <van-cell is-link :title="title" @click="show = true" />
  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" class="out" :round="false" />
</template>
<script lang="ts" setup>
import { Cell as vanCell, ActionSheet as vanActionSheet } from 'vant'
import { ref } from 'vue'
import useTelephoneStore from '@/store/login-telephone.ts'



const store = useTelephoneStore()


const show = ref(false);
const title = ref<string>('中国大陆')
const actions = [
  { name: '中国大陆', num: '+86', color: '#fb7299' },
  { name: '中国香港特别行政区', num: '+852' },
  { name: '中国澳门特别行政区', num: '+853' },
  { name: '中国台湾', num: '+886' },
];
interface Item {
  name: string,
  num: string,
  color?: string
}
const onSelect = (item: Item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  title.value = item.name

  // 清空所有选项的颜色
  for (let i = 0; i < actions.length; i++) {
    delete actions[i].color
  }

  // 给指定的选项字体燕妮色
  item['color'] = '#fb7299'

  store.ChangeTel(item.num)
};
</script>
<style scoped lang="scss"></style>